<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-divider content-position="left">basic information</el-divider>
        <el-form ref="xmForm" size="small" :model="entity" :rules="rules" label-width="220px">
          <el-form-item label="order No" prop="orderno">
            <el-input v-model="entity.orderno" placeholder="order No" />
          </el-form-item>
          <el-form-item label="order title" prop="title">
            <el-input v-model="entity.title" placeholder="order title" />
          </el-form-item>
          <el-form-item label="select custom" prop="kehuuserid">
            <el-select v-model="entity.kehuuserid" filterable placeholder="please select">
              <el-option v-for="item in keHuUserList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="order speed" prop="speed">
            <el-slider v-model="entity.speed"></el-slider>
          </el-form-item>
          <el-form-item label="Expected Completion Date" prop="completedate">
            <el-date-picker v-model="entity.completedate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-divider content-position="left">product information</el-divider>
        <el-button type="primary" size="mini" @click="addProduct" style="float: right;margin-right: 20px">add product</el-button>
        <div style="clear: both"></div>
        <table class="producttable">
          <tr style="height: 30px; line-height: 30px">
            <th style="width: 35%">Product Name</th>
            <th style="width: 45%">Product Specifications</th>
            <th style="width: 15%">Count</th>
            <th style="width: 5%">#</th>
          </tr>
          <tr v-for="(item,index) in productList" style="height: 40px;line-height: 40px">
            <td>
              <el-input v-model="item.productname"></el-input>
            </td>
            <td>
              <el-input v-model="item.productguige"></el-input>
            </td>
            <td>
              <el-input v-model="item.totalcount"></el-input>
            </td>
            <td>
              <el-popconfirm confirmButtonText='ok' cancelButtonText='cancel'
                             icon="el-icon-info" iconColor="red"
                             title="confirm delete?" @confirm="deleteProduct(item.id, index)">
                <el-button slot="reference"  size="mini" icon="el-icon-delete" type="warning"></el-button>
              </el-popconfirm>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <el-divider content-position="left">produce step information</el-divider>
        <el-form ref="scStepForm" size="small" label-width="220px">
          <el-form-item>
            <el-dropdown trigger="click" size="mini" style="float: right;margin-top: -3px" @command="handleCommand">
              <el-button type="primary" size="mini" >
                select step model<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(model,index) in scStepModelList" :key="model.id" :command="model.id">
                  {{model.modelname}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" size="mini" @click="addScStep('produce step')" style="float: right; margin-right: 10px">add step</el-button>
          </el-form-item>
          <el-form-item label="step title" prop="stepname" v-for="(item,index) in scStepList" :key="index + '-' + item.id">
            <el-input v-model="item.stepname" placeholder="step title" >
              <template slot="append">
                <el-popconfirm confirmButtonText='ok' cancelButtonText='cancel'
                               icon="el-icon-info" iconColor="red"
                               title="confirm delete?" @confirm="deleteScStep(item.id, index)">
                  <el-button slot="reference" type="danger" icon="el-icon-delete"></el-button>
                </el-popconfirm>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="text-align: center">
        <el-button type="primary" size="large" @click="onSubmit">ok</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
import dayjs from "dayjs";
export default {
  props:{
    entityId : {type : Number, default: 0}
  },
  data() {
    return {
      entity: {
        id : this.entityId,
        kehuuserid : undefined,
        orderno: '',
        title: '',
        completedate: '',
        speed:0,
      },
      keHuUserList:[],
      productList:[],
      scStepModelList:[],
      scStepList:[],
      rules: {
        orderno: [
          { required: true, message: 'please input order No', trigger: 'blur' },
          { min: 6, max: 100, message: 'Between 6 and 20 characters in length',  trigger: 'blur' }
        ],
        title: [
          { required: true, message: 'please input order title', trigger: 'blur' },
          { min: 6, max: 100, message: 'Between 6 and 20 characters in length',  trigger: 'blur' }
        ],
        kehuuserid: [
          { required: true, message: 'please select custom', trigger: 'blur' },
        ],
        completedate: [
          { required: true, message: 'please input order complete date', trigger: 'blur' },
        ],
      }
    }
  },
  mounted() {
    this.loadKeHu()
    this.loadEntity();
    this.loadProduct();
    this.loadScStepModel();
    this.loadScStep();
  },
  methods: {
    loadKeHu(){
      request({ url: '/emp/kehu/listallkehu', data: {} }).then( res =>{
        this.keHuUserList = res.data
      })
    },
    loadEntity(){
      if(this.entityId > 0){
        request({ url: '/emp/order/getorder', data: {id : this.entityId} }).then( res =>{
          this.entity = res.data
          this.entity.completedate = dayjs(this.entity.completedate).format('YYYY-MM-DD')
        })
      }
    },

    /*订单产品*/
    loadProduct(){
      if(this.entityId > 0){
        request({ url: '/emp/orderproduct/listproduct', data: {id:this.entityId} }).then( res =>{
          this.productList = res.data
          if(this.productList.length === 0){
            this.productList.push({productname:'produce name', productguige:'produce specifications', totalcount : 1, orderid:this.entityId, id:0})
          }
        })
      }else{
        this.productList.push({productname:'produce name', productguige:'produce specifications', totalcount : 1, orderid:this.entityId, id:0})
      }
    },
    addProduct(){
      this.productList.push({productname:'produce name', productguige:'produce specifications', totalcount : 1, orderid:this.entityId, id:0})
    },
    deleteProduct(id, index){
      if(id>0){
        request({ url: '/emp/orderproduct/deleteproduct', data: {id:id} }).then( res =>{
          this.productList = this.productList.filter((s,i)=>i!==index)
        })
      }else{
        this.productList = this.productList.filter((s,i)=>i!==index)
      }
    },

    /*生产步骤*/
    loadScStepModel(){
      request({ url: '/emp/stepmodel/listmodel', data: {id:this.entityId} }).then( res =>{
        this.scStepModelList = res.data
      })
    },
    handleCommand(command){
      request({ url: '/emp/stepmodel/listmodelmx', data: {id:command} }).then( res =>{
        res.data.forEach((mx)=>{
          this.addScStep(mx.stepname)
        })
      })
    },
    loadScStep(){
      if(this.entityId > 0){
        request({ url: '/emp/orderscstep/listorderstep', data: {id:this.entityId} }).then( res =>{
          this.scStepList = res.data
          if(this.scStepList.length === 0){
            this.scStepList.push({stepname:'produce step', sortid:0, orderid:this.entityId, id:0})
          }
        })
      }else{
        this.scStepList.push({stepname:'produce step', sortid:0, orderid:this.entityId, id:0})
      }
    },
    addScStep(stepName){
      let sortIdArray = this.scStepList.map((val) => val.sortid)
      sortIdArray.sort((a,b)=>a-b);
      const maxSortId = sortIdArray[sortIdArray.length -1];
      this.scStepList.push({stepname: stepName, sortid:(maxSortId + 100), orderid:this.entityId, id:0})
    },
    deleteScStep(id, index){
      if(id>0){
        request({ url: '/emp/orderscstep/deleteorderstop', data: {id:id} }).then( res =>{
          this.scStepList = this.scStepList.filter((s,i)=>i!==index)
        })
      }else{
        this.scStepList = this.scStepList.filter((s,i)=>i!==index)
      }
    },
    onSubmit(){
      this.$refs['xmForm'].validate((valid) => {
        if(valid){
          this.entity.productList = this.productList
          this.entity.scStepList = this.scStepList
          request({
            url: '/emp/order/addeditorder',
            data: this.entity
          }).then( res =>{
            if(res.code === "200"){
              this.$message.success(res.msg)
              this.$emit('update:visible', false);  //关闭弹窗
              this.entityId > 0 ? this.$EventBus.$emit("orderedit", {}):this.$EventBus.$emit("orderadd", {})
            }else{
              this.$message.error(res.msg);
            }
          })
        }else{
          return false;
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
table.producttable{
  width: 90%;
  margin: 10px auto;
  text-align: left;
  tr th{
    //margin-bottom: 15px;
  }
}
</style>
